<template>
  <Dialog
    ref="dialog"
    width="1000"
    :title="ruleForm.id ? '修改账号' : '创建账号'"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      label-width="auto"
      :rules="rules"
      status-icon
    >
      <el-form-item class="form_item" label="姓名" prop="realName">
        <el-input v-model="ruleForm.realName" />
      </el-form-item>
      <el-form-item class="form_item" label="手机号" prop="mobile">
        <el-input v-model="ruleForm.mobile" maxlength="11" />
      </el-form-item>
      <el-form-item class="form_item" label="一级分类" prop="bigRoleId">
        <el-select
          v-model="ruleForm.bigRoleId"
          placeholder=""
          style="width: 100%"
          :disabled="ruleForm.id ? true : false"
          @change="selectChange(ruleForm.bigRoleId)"
        >
          <el-option
            v-for="item in role"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            @click="onClickBigRole(item)"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="form_item" label="二级分类" prop="roleId">
        <el-select
          v-model="ruleForm.roleId"
          placeholder=""
          style="width: 100%"
          :disabled="ruleForm.id ? true : false"
          @change="selectChange(ruleForm.bigRoleId)"
        >
          <el-option
            v-for="item in roleDate"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item class="form_item" label="选择省份" prop="checkedCities">
        <el-checkbox
          v-model="checkAll"
          name="province"
          @change="handleCheckAllChange"
        >
          全选
        </el-checkbox>
        <el-checkbox-group
          name="province"
          style="margin-left: 20px"
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox
            name="province"
            v-for="city in cities"
            :key="city"
            :label="city"
            :value="city"
          >
            {{ city.provinceName }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item> -->
      <el-divider />
      <div class="box">
        <div class="box_left">
          <div class="money">
            你的余额:<span class="txt">{{ moneyNum }}</span>
          </div>
          <span class="url" @click="btn">请充值</span>
        </div>
        <div class="right">
          <el-button class="height40" @click="closeChange">取消</el-button>
          <el-button type="primary" class="height40" @click="submit"
            >提交</el-button
          >
        </div>
      </div>
    </el-form>
  </Dialog>
</template>
<script setup>
defineProps({
  moneyNum: {
    type: String,
    default: '',
  },
});
import { ref } from 'vue';

// 接口api
import Dialog from '@/components/Dialog/Dialog.vue';
import { accountCreate, myRoleList } from '@/api/system/account.js';
import { ElMessage } from 'element-plus';
// import { getProvinceList } from '@/api/appv2/appv2';
import { useRouter } from 'vue-router';
const router = useRouter();
const dialog = ref(null);
const ruleForm = ref({});
const role = ref([]);
const roleDate = ref([]);
const emit = defineEmits(['accountLists']);
let { proxy } = getCurrentInstance();
const checkedCities = ref([]);
// const cities = ref([]);
const checkAll = ref(false);
// function getList() {
//   getProvinceList().then((res) => {
//     cities.value = res.data;
//   });
// }

// getList();

// const handleCheckAllChange = (val) => {
//   checkedCities.value = val ? cities.value : [];
// };
// const handleCheckedCitiesChange = (value) => {
//   let a = [];
//   for (const v of value) {
//     if (!a.includes(v.provinceName)) {
//       a.push(v.provinceName);
//     } else {
//       a.filter((item) => item !== v.provinceName);
//     }
//   }
//   const checkedCount = a.length;
//   checkAll.value = checkedCount === cities.value.length;
// };
//充值
const btn = () => {
  router.push({ path: '/financialMan/rechargeManage' });
};

// 校验规则
const rules = {
  realName: [{ required: true, trigger: 'blur', message: '请输入您的姓名' }],
  mobile: [{ required: true, trigger: 'blur', message: '请输入您的手机号' }],
  bigRoleId: [{ required: true, trigger: 'blur', message: '请选择一级分类' }],
  roleId: [{ required: true, trigger: 'blur', message: '请选择二级分类' }],
  //   checkedCities: [
  //     { required: true, trigger: "change", message: "请选择省份" },
  //     { type: "array", message: "请至少选择一个省份", trigger: "change" },
  //   ],
};

function closeChange() {
  dialog.value.closeChange();
}

function submit() {
  let a = [];
  proxy.$refs.ruleFormRef.validate((valid) => {
    if (valid) {
      // if (checkedCities.value.length == 0) {
      //   ElMessage.warning('请选择省份');
      //   return false;
      // } else {
      //   for (const v of checkedCities.value) {
      //     a.push(v.id);
      //   }

      // }
      ruleForm.value.pid = a.join(',');
      accountCreate(ruleForm.value).then((res) => {
        if (res.code === 20000) {
          ElMessage.success('操作成功');
          dialog.value.closeChange();
          emit('accountLists');
        }
      });
    } else {
      ElMessage.warning('请完善信息');
    }
  });
}

function getUserList() {
  myRoleList().then((res) => {
    if (res.code === 20000) {
      role.value = res.data;

      const index = role.value.findIndex(
        (item) => item.id == ruleForm.value.bigRoleId
      );

      if (index >= 0) {
        roleDate.value = role.value[index].children;
      }
    }
  });
}

function openchange(val) {
  dialog.value.openChange();
  nextTick(() => {
    getUserList();
  });
  // 转换成数字类型
  if (val?.pid) {
    let a = val?.pid.split(',').map((item) => parseInt(item, 10));
    checkedCities.value = cities.value.filter((v) => a?.includes(v.id));
    if (checkedCities.value.length == cities.value.length) {
      checkAll.value = true;
      // handleCheckAllChange(true);
    }
  } else {
    checkedCities.value = [];
    checkAll.value = false;
  }

  if (val && val.id) {
    ruleForm.value = val;
  } else {
    ruleForm.value = {};
    roleDate.value = {};
  }
}

defineExpose({
  openchange,
});

function selectChange() {}

function onClickBigRole(item) {
  roleDate.value = item.children;
  ruleForm.value.roleId = '';
}
</script>
<style scoped lang="scss">
@import '@/assets/styles/global.scss';
.form_item {
  margin-bottom: 20px !important;
}
.box {
  display: flex;
  justify-content: space-between;
  .box_left {
    display: flex;
    .txt {
      color: red;
      display: inline-block;
      margin-left: 5px;
      font-family: bold;
    }
    .money {
      margin-right: 20px;
    }
    .url {
      cursor: pointer;
      color: var(--primary-color);
    }
  }
}
</style>
